import React from "react";
import "./Home.css";
import "antd/dist/antd.css";
import { Layout, Menu, Breadcrumb,Button} from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons";
import { useHistory } from "react-router-dom";
//路由跳转
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ArticleDetail from "./article/ArticleDetail.jsx";
import ArticleItem from "./article/ArticleItem.jsx";
import BannerItem from "./Banner/BannerItem.jsx";
import SubjectItem from "./Subject/SubjectItem.jsx";
import SubjectArticle from "./Subject/SubjectArticle.jsx";
import SubjectDetail from "./Subject/SubjectDetail.jsx";



function Home() {
    let history = useHistory();
  const { SubMenu } = Menu;
  const center =()=>{
    sessionStorage.clear()
    history.push('/login')
  }
  const { Header, Content, Sider } = Layout;
  return (
    // 路由与组件之间的关系
    <Router>
      <div>
        <Layout style={{height:"100vh"}}>
          <Header className="header">
            <div className="caretColor">后台管理系统</div>
            <div>
             <Button type="link"  onClick={center}>退出</Button>
            </div>
          </Header>
          <Layout>
            <Sider width={200} className="site-layout-background">
              <Menu
                mode="inline"
                defaultSelectedKeys={["1"]}
                defaultOpenKeys={["sub1"]}
                style={{ height: "100%", borderRight: 0 }}
              >
                <SubMenu
                  key="sub1"
                  icon={<NotificationOutlined />}
                  title="轮播管理"
                >
                  <Menu.Item key="1">
                  <Link to="/bannerItem">轮播</Link>
                  </Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" icon={<UserOutlined />} title="文章管理">
                  <Menu.Item key="2" >
                  <Link to="/articleDetail">文章详情</Link>
                  </Menu.Item>
                  <Menu.Item key="4">
                  <Link to="/articleItem">文章列表</Link>
                </Menu.Item>
                </SubMenu>
                <SubMenu key="sub3" icon={<LaptopOutlined />} title="专题管理">
               
                  <Menu.Item key="5">
                  <Link to="/subjectItem">专题列表</Link>
                  </Menu.Item>
                  <Menu.Item key="6">
                  <Link to="/subjectArticle">专题文章</Link>   
                  </Menu.Item>
                  <Menu.Item key="7">
                  <Link to="/subjectDetail">专题详情</Link>  
                 </Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Layout>
              <Breadcrumb>
              </Breadcrumb>
              <Content>
            <Route  path="/articleDetail">
              <ArticleDetail />
            </Route>
            <Route  path="/articleItem">
              <ArticleItem />
            </Route>
            <Route  path="/subjectItem">
              <SubjectItem />
            </Route>
            <Route  path="/bannerItem">
              <BannerItem />
            </Route>
            <Route  path="/subjectArticle">
              <SubjectArticle />
            </Route>
            <Route  path="/subjectDetail">
              <SubjectDetail />
            </Route>
              </Content>
            </Layout>
          </Layout>
        </Layout>
        </div>
        </Router>
  );
}

export default Home;
